<template>
  <div v-if="element && element.key" :class="{ active: selectWidget && selectWidget.key == element.key }" class="inline-view" @click.stop="handleSelectWidget(index)">
    <template v-if="element.type == 'input'">
      <el-input v-model="element.options.defaultValue" :style="{ width: element.options.width }" :placeholder="element.options.placeholder"></el-input>
    </template>

    <template v-if="element.type == 'textarea'">
      <el-input v-model="element.options.defaultValue" :style="{ width: element.options.width }" :placeholder="element.options.placeholder" :rows="5" type="textarea"></el-input>
    </template>

    <template v-if="element.type == 'number'">
      <el-input-number v-model="element.options.defaultValue" :disabled="element.options.disabled" :controls-position="element.options.controlsPosition" :style="{ width: element.options.width }"></el-input-number>
    </template>

    <template v-if="element.type == 'radio'">
      <el-radio-group v-model="element.options.defaultValue" :style="{ width: element.options.width }">
        <el-radio v-for="(item, index2) in element.options.options" :key="item.value + index2" :style="{ display: element.options.inline ? 'inline-block' : 'block' }" :label="item.value">
          {{ element.options.showLabel ? item.label : item.value }}
        </el-radio>
      </el-radio-group>
    </template>

    <template v-if="element.type == 'checkbox'">
      <el-checkbox-group v-model="element.options.defaultValue" :style="{ width: element.options.width }">
        <el-checkbox v-for="(item, index2) in element.options.options" :key="item.value + index2" :style="{ display: element.options.inline ? 'inline-block' : 'block' }" :label="item.value">
          {{ element.options.showLabel ? item.label : item.value }}
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="element.type == 'time'">
      <el-time-picker v-model="element.options.defaultValue" :is-range="element.options.isRange" :placeholder="element.options.placeholder" :start-placeholder="element.options.startPlaceholder" :end-placeholder="element.options.endPlaceholder" :readonly="element.options.readonly" :disabled="element.options.disabled" :editable="element.options.editable" :clearable="element.options.clearable" :arrow-control="element.options.arrowControl" :style="{ width: element.options.width }"></el-time-picker>
    </template>

    <template v-if="element.type == 'date'">
      <el-date-picker v-model="element.options.defaultValue" :type="element.options.type" :is-range="element.options.isRange" :placeholder="element.options.placeholder" :start-placeholder="element.options.startPlaceholder" :end-placeholder="element.options.endPlaceholder" :readonly="element.options.readonly" :disabled="element.options.disabled" :editable="element.options.editable" :clearable="element.options.clearable" :style="{ width: element.options.width }"></el-date-picker>
    </template>

    <template v-if="element.type == 'rate'">
      <el-rate v-model="element.options.defaultValue" :max="element.options.max" :disabled="element.options.disabled" :allow-half="element.options.allowHalf"></el-rate>
    </template>

    <template v-if="element.type == 'color'">
      <el-color-picker v-model="element.options.defaultValue" :disabled="element.options.disabled" :show-alpha="element.options.showAlpha"></el-color-picker>
    </template>

    <template v-if="element.type == 'select'">
      <el-select v-model="element.options.defaultValue" :disabled="element.options.disabled" :multiple="element.options.multiple" :clearable="element.options.clearable" :placeholder="element.options.placeholder" :style="{ width: element.options.width }">
        <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel ? item.label : item.value"></el-option>
      </el-select>
    </template>

    <template v-if="element.type == 'switch'">
      <el-switch v-model="element.options.defaultValue" :disabled="element.options.disabled"></el-switch>
    </template>

    <template v-if="element.type == 'slider'">
      <el-slider v-model="element.options.defaultValue" :min="element.options.min" :max="element.options.max" :disabled="element.options.disabled" :step="element.options.step" :show-input="element.options.showInput" :range="element.options.range" :style="{ width: element.options.width }"></el-slider>
    </template>

    <template v-if="element.type == 'imgupload'">
      <fm-upload v-model="element.options.defaultValue" :disabled="element.options.disabled" :style="{ width: element.options.width }" :width="element.options.size.width" :height="element.options.size.height" token="xxx" domain="xxx"></fm-upload>
    </template>

    <template v-if="element.type == 'blank'">
      <div style="height: 50px; color: #999; background: #eee; line-height: 50px; text-align: center">自定义区域</div>
    </template>

    <el-button v-if="selectWidget && selectWidget.key == element.key" title="删除" class="widget-action-delete" circle plain type="danger" @click.stop="handleWidgetDelete(index)">
      <i class="yrt-shanchu2"></i>
    </el-button>
    <el-button v-if="selectWidget && selectWidget.key == element.key" title="复制" class="widget-action-clone" circle plain type="primary" @click.stop="handleWidgetClone(index)">
      <i class="yrt-fuzhi4"></i>
    </el-button>
  </div>
</template>

<script>
import FmUpload from './upload/index.vue';
export default {
  components: {
    FmUpload,
  },
  props: {
    element: {
      type: Object,
      default: () => {
        return {};
      },
    },
    select: {
      type: Object,
      default: () => {
        return {};
      },
    },
    index: {
      type: Number,
      default: null,
    },
    fields: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      selectWidget: this.select,
    };
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val);
      },
      deep: true,
    },
  },
  methods: {
    handleSelectWidget(index) {
      this.selectWidget = this.fields[index];
    },
    handleWidgetDelete(index) {
      if (this.fields.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {};
        } else {
          this.selectWidget = this.fields[index - 1];
        }
      } else {
        this.selectWidget = this.fields[index + 1];
      }

      this.$nextTick(() => {
        this.fields.splice(index, 1);
      });
    },
    handleWidgetClone(index) {
      let cloneData = {
        ...this.fields[index],
        options: { ...this.fields[index].options },
        key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999),
      };

      if (this.fields[index].type === 'radio' || this.fields[index].type === 'checkbox') {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map((item) => ({ ...item })),
          },
        };
      }

      this.fields.splice(index, 0, cloneData);

      this.$nextTick(() => {
        this.selectWidget = this.fields[index + 1];
      });
    },
  },
};
</script>
